<template>
  <div class="cancel-account">   
     <div class="container">
        <div class="model-title">账号注销</div>
        <!-- 表单 -->
        <div class="form-box">
          <div class="logo">
              <img width="50%" src="http://1.xinli2017.applinzi.com/login/img/%E9%93%B6%E8%81%94.png" alt="加载失败">
          </div>
          <div class="form-container">
            <el-form ref="brandForm" :model="brandForm" label-width="100px">
               <el-form-item label="手机">
                  <el-input placeholder="请输入手机号" v-model="brandForm.phone"></el-input>
               </el-form-item>
               <el-form-item label="贴牌">
                  <el-select v-model="brandForm.brand" placeholder="请选择">
                    <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
               </el-form-item>
               <el-form-item>
                 <div class="hot-tips">
                   <div><span>温馨提醒：</span><span>输入手机号码和贴牌点击注销，将符合条件的账号注销.</span></div>
                   <div><span>官方热线：</span><span>400 0215 918</span></div>
                 </div>
                  <el-button type="danger" size="medium" @click="cancelAccount">账号注销</el-button>
               </el-form-item>
            </el-form>
          </div>

        </div>
     </div>
  </div>
</template>

<script>
export default {
  name:'cancel-account',
  data () {
    return {
        brandList:[],
        brandForm:{
          phone:null,
          brand:null
        }
    };
  },
  components: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init(){
        // 获取已有的贴牌
        let url = `user/brand/query/all`;
        this.$Http.get(url).then(res=>{
          if(res.data.resp_code === "000000"){
            this.brandList=res.data.result; 
          }else{
            this.$notify.info({
                title: '提示',
                message: res.data.resp_message
            });
          }
        }).catch(err=>{
          this.$notify.error({
              title: '提示',
              message: "获取品牌信息失败！"
          });
        })
    },
    cancelAccount(){
      // 提交切换
      if(this.brandForm.phone ===null||this.brandForm.phone ===""){
        this.$message.error("手机号不能为空！")
        return;
      }
      if(this.brandForm.brand ===null||this.brandForm.brand ===""){
        this.$message.error("请选择贴牌！")
        return;
      }
      let url = `user/delete/deleteUser`,
          params = `phone=${this.brandForm.phone}&brandId=${this.brandForm.brand}`;
          this.$Http.post(url,params).then(res=>{
            if(res.data.resp_code === "000000"){

            }
            this.$notify.info({
                title: '提示',
                message: res.data.resp_message
            });
          }).catch(err=>{
            this.$notify.error({
                title: '提示',
                message: "切换贴牌失败！"
            });
          })
    }
  }
}

</script>
<style scoped>
.cancel-account{
  box-sizing: border-box;
  padding: 20x;
}
.form-box{
  padding: 10px;
  max-width: 600px;
}
.hot-tips{
  padding: 20px 0;
  font-size: 12px;
  color: #ccc;
}
.logo{
  padding: 10px 40px;
}
</style>